✅팀원소개

✅작업내용

✅코드분석

✅기능시연

✅팀원소개

이 건 김나영 장화현 정주은

송영진 오원석 김성경 김세연

팀장

비선실세

✅일정관리

✅벤치마킹

✅작업내용 -개요

구분 구현 기능 사용 기능

공통

UI Tiles, 공통빈

회원가입 js, ajax, JQuery

로그인 js, ajax, JQuery

정답률 표시 (차트) c3, JQuery

문제 풀기 / 채점결과 보기 ResultMap, ajax

강사 문제 업로드 / 수정 / 삭제 ResultMap, AOP

✅작업내용 -간단소개

✅작업내용 -유스케이스

✅작업내용 – DB 설계

✅코드분석 : UI (tiles / 공통빈 적용)

■1. 환경설정

■web.xml ___________________________________________________________________________________________

공통빈 설정

DispatcherServlet 설정

✅코드분석 : UI (tiles / 공통빈 적용)

■2. tiles 설정

■kosmo-web.xml ___________________________________________________________________________________________

■tiles-definitions.xml ___________________________________________________________________________________________

tiles 설정내용이 들어있는 xml 파일

tiles로 사용할 jsp파일들 설정

tiles를 적용할 jsp파일의 경로 설정

{1} / {2} 는 우선순위를 의미

✅코드분석 : 로그인

✅코드분석 : 회원가입

이름 성과 이름을 받아와 합쳐주는 작업

✅주/객관식 문제등록 : UI

과목명, 문제유형을 라디오버튼으로 생성

문제유형에 따라

양식이 변경되도록 처리

정답을 hidden 으로 숨겨두고,

객관식의 경우,

라디오버튼의 value값에 따라 보기의 값을 가져와

정답에 넣어주고,

주관식의 경우,

정답란에 입력한 내용을

정답에 넣어 줌

✅주/객관식 문제등록 : 등록양식 변경

양식 중구분되는 부분을 각각 <div>로나눈 후,

style="display: none" 해 두고,

라디오버튼에 onclick 으로 function을 걸어준다.

✅주/객관식 문제등록 : 정답 복사

객관식 문제의 경우,

라디오버튼에 체크된 번호를 가져와

해당 번호의 보기의 text를

Hidden 으로 숨겨진 정답란에 복사하는 function

- switch/case문을 사용

✅주/객관식 문제등록 : 데이터 저장

Form 에 담아서 데이터를 넘길 때,

Onsubmit="return 함수()" 를 걸어주면,

Submit버튼이 작동하기 전에

해당함수를 먼저 실행 후, true가 반환되면 동작함.

미입력값이 있는 경우,

Alert 으로 경고창 실행하고,

Confirm 으로 확인창 실행하여

진행의사확인

✅주/객관식 문제등록 : 데이터 저장

Controller

Dao

Mapper

VO객체를 받아야 하기 때문에

POST방식 사용

Service 단을 거쳐서 dao 의

메서드 호출하여 VO를 넣어준다.

처리 후, 입력폼으로 redirect 이동

✅주/객관식 문제 수정/삭제 : UI

로그인 시, 회원번호를 sessionUsernum 변수로

저장해 두고,

본인이 등록한 문제리스트를 호출

ForEach 문으로 리스트 출력하면서

각 수정, 삭제 버튼에 해당 문제번호 부여

수정버튼 클릭 시, 수정페이지로 이동

삭제버튼 클릭 시, 바로 삭제

과목별로 10문제 세트가 완성되어

회차가 업데이트된 문제의 경우,

문제수정 및 삭제 리스트에서 제외

✅주/객관식 문제 수정/삭제 : UI

삭제 버튼에 문제번호를 인자로 받는 function

Controller에 문제번호를 파라미터로 담아서 넘깁니다.

Java script

Controller 파라미터는 String 으로 넘어오기 때문에

인자가 int 라면 자료형을 바꿔서 받아 사용해 줍니다.

돌아갈 페이지가 사용자가 등록한 문제리스트 이므로,

Session에 저장해둔 sessionUsernum 을 받아

파라미터로 사용합니다.

✅주/객관식 문제 수정 : 등록양식 변경

문제 등록폼과 마찬가지로 문제타입 정보에 따라서

양식이 변경되도록 설정

window.onload = function()

을 걸어주면 페이지 dom객체 생성 후

자동 실행됨

보기1번값이 null 이아니면, 객관식

null이면 주관식 으로 구분하여

Map 에 저장하여

문제번호로 가져온 문제의 항목별 정보와 함께

페이지에 전달

✅주/객관식 문제 수정 : 데이터 저장

로직은 기본적으로

문제등록과 동일

Dao , Mapper 에서

Insert 대신 update사용

✅코드분석 : 문제입력

문제등록

✅코드분석 : 문제 등록 (주/객관식 처리 시 - Ajax사용)

SelectBox의 선택값이 객관식인지 주관식인지 구별

선택값에 따라 받아온 Data를

target의 자식태그(children())를 삭제(remove())

후 서버에서 받아온 데이터로 새로 작성(html(data))

한다

✅코드분석 : 회차 업데이트(1회차->2회차)

■회차업데이트 결과 표시 - .jsp , controller

한 회차에 30문제가 들어가면 2회차로 회차가 업데이트 되고,다음으로 들어가는

문제들은 1회차에 문제가 들어갑니다.

✅코드분석 : 회차 업데이트

■회차업데이트 결과 표시 - AOP, mapper

문제입력하기 전 회차 문제갯수를 파악하고 문제를 입력합니다.

✅코드분석 : 문제 등록시 회차 자동업데이트 트리거

회차 자동업데이트 코드

트리거 내에서 팔요한 data를

임시저장소에 저장

트리거 내에서 필요한

data를 찾는 과정

회차번호가 없을 시 회차번호를 새로 등록

이미 생성된 회차번호가 있을 시 자기과목의

마지막회차번호에서 다음회차로 업데이트

✅코드분석 : 임시문제게시판

임시게시판에서 수정 및 삭제 가능

✅코드분석 : 한문제 풀기 Mapper

문제번호를 기준으로

문제의 디테일을 가져옴

반환타입은 문제의 정보를 담는 VO

문제, 보기 1번~4번, 정답을 가져옴

모든 정보를 가져옴

디테일을 위한 Mapper

정답 채점을 위한 Mapper

✅코드분석 : 한문제 풀기

문제번호를 파라미터로

받음

문제번호를 기준으로

해당 문제의 디테일을

가져와서 전송

DB에 등록될 유저번호를

세션으로 사용

(로그인 중인 유저가

누구인지 확인)

유저의 기록에 따라

풀어본 문제인지 확인

✅코드분석 : 한문제 풀기 주/객관식 처리 시 - Ajax사용

DB의기록 유무에 따라서 메시지를 다르게 출력

✅코드분석 : 한문제 풀기

Controller에서 가져온 dlist로 여러가지 디테일을 뽑기가 가능

과목번호를 기준으로 자신이 푸는 문제가 무슨 문제인지 파악 가능

✅코드분석 : 한문제 풀기

자신이 푸는 문제의 과목을 확인 가능

선택한 문제의 문제와 보기를 확인 가능

라디오 버튼으로 정답을 선택

Required 선언으로 같은 아이디의 라디오 버튼이

반드시 선택 되도록 설정

✅코드분석 : 한문제 풀기

Hidden으로 문제번호를 넘기면서

chkProcess로POST방식으로 이동

같은 문제번호를 받기 때문에 해당 페이지 새로고침

과목번호에 따라

과목별로 리스트 따로 출력

✅코드분석 : 한문제 풀기

문제번호를 기준으로

해당 문제의 정답과

회차를 조회

시험 결과 테이블에

INSERT 될 정보들을

VO에 저장

자신이 입력한 답이

정답인지 아닌지 비교해서

시험결과 테이블에 INSERT

✅코드분석 : 한문제 풀기 후 결과 등록

문제를 푼 유저의 유저번호 푼 문제의 문제번호 푼문제가 정답인지 아닌지 푼 문제의 회차 번호

설정한 VO를 저장

✅코드분석 : 1회차 문제 풀이 (30문제)

■1. 회차 목록을 표시 –view 사용

✅코드분석 : 1회차 문제 풀이 (30문제)

■2. 30문제 표시 – resultMap 사용

■Controller_____________________________________________________________________

■Mapper _____________________________________________________________________

✅코드분석 : 1회차 문제 풀이 (30문제)

■3. 30문제 답을 전달 –Jquery, ajax 사용

답이 30개 존재하므로 30개 답을 담는 배열을 선언

라디오버튼의 체크된 값을 30번 받아온다

배열의 각 인덱스에 넣는다

데이터를 컨트롤러로 넘긴다.

배열을 ajax 로 넘길 시 필요한 옵션 traditional

✅코드분석 : 1회차 문제 풀이 (30문제)

■4. 30문제 답을 전달 (1) –Controller ( 자동 채점 / 정답 여부 / 정답률 계산)

채점 및 데이터 인풋 로직은 1문제와 동일하다

리스트의 인덱스로 값을 뽑아온다

✅코드분석 : 1회차 문제 풀이 (30문제)

■4. 30문제 답을 전달 (2) –Mapper (자동채점 / 결과, 정답률을 DB에넣기)

결과를 DB에업데이트 정답률 계산 (함수 사용)

✅코드분석 : 1회차 문제 풀이 (30문제)

■5. 문제 풀이 결과 표시 - Controller

✅코드분석 : 차트 (Bar, Line, Donut)

■차트 생성시 사전 준비 및주의사항

C3.css가 적용되지

않으면 발생하는 오류

✅코드분석 : 차트 (Bar, Line, Donut)

■Bar 차트

Bar or Line 차트에 적합한 JSON 형태

차트에 출력할 데이터 DB -> List로 저장

JsonArray에add : 차트 출력시 Value가 됨

JsonObject에 (“key” , value) 로 저장

X축 카테고리로 문제번호 입력

차트에 출력할 데이터

✅코드분석 : 차트 (Bar, Line, Donut)

■Bar 차트

✅코드분석 : 차트 (Bar, Line, Donut)

■Line 차트

Bar or Line 차트에 적합한 JSON 형태

차트에 출력할 데이터 DB -> List로 저장

차트 출력시 Value

JsonObject에 (“key” , value) 로 저장

X축 카테고리로 회차번호 입력

차트에 출력할 데이터

✅코드분석 : 차트 (Bar, Line, Donut)

■Line 차트

✅코드분석 : 차트 (Bar, Line, Donut)

■Donut 차트

차트에 출력할 데이터

Donut 모양 차트에 적합한 JSON 형태

필요데이터 추출

Map에 “key” : value로 저장

map을문자열 json object의

값으로 변경 시켜주는 역할

✅코드분석 : 차트 (Bar, Line, Donut)

■Donut 차트

System.out.println("고생많으셨습니다🤗 ");